<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/vue.js"></script>
		<script src="../js/vue-router.js"></script>
	</head>
	<body>
		
	<div id="app">
		<router-link to="/info/小红">小红个人信息</router-link>
		<router-link to="/info/小明">小明个人信息</router-link>
		<router-link to="/info/张磊">张磊个人信息</router-link>
		<router-link to="/info/张三">张三个人信息</router-link>
		
		<router-view></router-view>
	</div>	
	
	<template id="t1">
		<div>
			<h3>{{this.$route.params.ids}} 个人信息页面</h3>
		</div>
	</template>
	
	<!-- {{this.$route.params.id}} -->
	
	<script>
	const routes=[
		{
			path:'/info/:ids',
			component:{
				template:"#t1"
			}
			
			
		}
	]
		
	const router=new VueRouter({
		routes
	})	
		var vm=new Vue({
			el:"#app",
			data:{
				
			},
			router
		})
		
		
	</script>	
		
		
		
		

		
		
		<!--
		要实现这么功能 --- 一个页面，载入不同的内容，就叫做动态路由。
		在vue-router中，要实现动态路由，从两个方面出发：
		在网址中传入参数
		如何在代码中接受这个参数
		
		在网址中传参的固定格式是 /detail/1，/detail/2
		在代码中接收这个参数，需要走两步：
		配置路由的格式要发生变化，path : ‘/detail/：id’
		在代码中通过 this.$route.params.id
		 -->
		 
		 <!-- // 解决ElementUI导航栏中的vue-router在3.0版本以上重复点菜单报错问题
		 			const originalPush = VueRouter.prototype.push
		 			VueRouter.prototype.push = function push(location) {
		 			  return originalPush.call(this, location).catch(err => err)
		 			} -->
		 	<!-- 
		 所谓的编程式路由，就是通过代码来实现路由。
		 和前面的router-link进行对比。router-link是通过点击来进行跳转的。而编程式路由，就没有router-link，而是通过代码直接跳转。
		 
		 和a标签进行对比。
		 对于a标签传统的用法，直接使用a标签，然后设置href属性。点击就可以跳转了。
		 a标签或者其他标签，不是使用href属性，而是通过js，注册点击事件，在事件触发的时候，通过window.location.href来设置跳转。这种就属于编程式
		 
		 在vue-router，要实现编程式路由，只需要使用push方法。
		 
		 格式：router.push({ path: '/home' }) 
		 
		 匹配优先级
		 有时候，同一个路径可以匹配多个路由，此时，匹配的优先级就按照路由的定义顺序：谁先定义的，谁的优先级就最高。
		 -->
	</body>
</html>
